<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>本地音频播放器</title>
  </head>
  <body>
    <h1>本地音频播放器</h1>
    <p>注意：浏览器出于安全考虑，不能直接使用本地文件路径（如C:\music\song.mp3）</p>

    <h2>选择音频文件</h2>
    <input type="file" id="fileInput" accept="audio/*" />

    <div id="audioContainer">
      <p>请选择一个音频文件</p>
    </div>

    <script>
      const fileInput = document.getElementById("fileInput");
      const audioContainer = document.getElementById("audioContainer");

      fileInput.addEventListener("change", function (e) {
        console.log(e.target.files[0]);
        const file = e.target.files[0];
        if (!file) return;

        if (!file.type.startsWith("audio/")) {
          audioContainer.innerHTML = "<p>请选择音频文件（MP3、WAV等格式）</p>";
          return;
        }
        console.log(file, "00000000000");
        // 创建可播放的URL
        const objectURL = URL.createObjectURL(file);

        // 创建audio元素
        audioContainer.innerHTML = `
                <h3>正在播放: ${file.name}</h3>
                <audio controls autoplay>
                    <source src="${objectURL}" type="${file.type}">
                    您的浏览器不支持音频播放
                </audio>
                <p>文件大小: ${Math.round(file.size / 1024)} KB</p>
            `;

        // 清理内存（当页面关闭或需要时）
        // 注意：不要立即撤销URL，否则音频无法播放
        const audioElement = audioContainer.querySelector("audio");
        audioElement.addEventListener("ended", function () {
          URL.revokeObjectURL(objectURL);
        });
      });
    </script>
  </body>
</html>
